﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageGrid.aspx.cs" Inherits="BugSysSolution.PageTemplate.PageGrid" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Javascript/jquery-1.8.0.min.js"></script>
    <script src="Knockout.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div data-bind="simpleGrid: gridViewModel">
        </div>

        <input type="button" value="Add" data-bind="click:addItem" />
        <input type="button" value="Sort" data-bind="click:sortItem" />
        <input type="button" value="First" data-bind="click:jumpToFirstPage,enable:gridViewModel.currentPageIndex" />
    </form>
</body>
</html>
<script type="text/javascript">
    var data = [
        { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
        { name: "Speedy Coyote", sales: 89, price: 190.00 },
        { name: "Furious Lizard", sales: 152, price: 25.00 },
        { name: "Indifferent Monkey", sales: 1, price: 99.95 },
        { name: "Brooding Dragon", sales: 0, price: 6350 },
        { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
        { name: "Optimistic Snail", sales: 420, price: 1.50 }
    ];

    var model = function (items) {
        this.items = ko.observableArray(items);

        this.gridViewModel = new ko.simpleGrid.viewModel({
            data: this.items,
            columns: [
                { headerText: "Item Name", rowText: "name" },
                { headerText: "Sales Count", rowText: "sales" },
                {
                    headerText: "Price", rowText: function (item)
                    { return "$" + item.price.toFixed(2) }
                }],
            pageSize: 4
        })

        this.addItem = function () {
            this.items.push({ name: "AddItem", sales: 100, price: 1.5055 });
        }

        this.sortItem = function () {
            this.items.sort(function (a, b) {
                return a.name < b.name ? -1 : 1;
            });
        }

        this.jumpToFirstPage = function () {
            this.gridViewModel.currentPageIndex(0);
        }
    }

    ko.applyBindings(new model(data));
</script>
